<script setup>
import StoreStatusPanel from './components/StoreStatusPanel.vue'
import TodayBusinessPanel from './components/TodayBusinessPanel.vue'
import RecentProfitPanel from './components/RecentProfitPanel.vue'
import InventoryAlertPanel from './components/InventoryAlertPanel.vue'
</script>

<template>
  <div class="Dashboard">
    <div class="Dashboard-rows">
      <div class="Dashboard-row">
        <div class="Dashboard-panel">
          <StoreStatusPanel/>
        </div>
        <div class="Dashboard-panel">
          <TodayBusinessPanel/>
        </div>
      </div>
      <div class="Dashboard-row">
        <div class="Dashboard-panel">
          <RecentProfitPanel/>
        </div>
        <div class="Dashboard-panel">
          <InventoryAlertPanel/>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.Dashboard {
  display: flex;
  flex-direction: column;
  height: 100%;
  --dashboard-panel-min-height: 360px;
  --dashboard-gap: 16px;

  &-rows {
    display: block;
  }

  &-row {
    display: flex;
    gap: var(--dashboard-gap);
    margin-bottom: var(--dashboard-gap);
    flex-shrink: 0;
    align-items: stretch;
  }

  &-row:last-child {
    margin-bottom: 0;
  }

  &-panel {
    flex: 1;
    display: flex;
    flex-shrink: 0;

    > * {
      flex: 1;
      min-height: var(--dashboard-panel-min-height);
      box-sizing: border-box;
    }
  }
}
</style>
